<template>
  <nav class="navigation">
    <div class="nav-container">
      <div class="nav-brand">
        <router-link to="/" class="brand-link">
          <i class="fa fa-wrench"></i>
          <span>工具网站</span>
        </router-link>
      </div>
      
      <div class="nav-menu">
        <div
          class="nav-item"
          v-for="category in menuItems"
          :key="category.name"
          @mouseenter="onItemEnter(category.name)"
          @mouseleave="onItemLeave"
        >
          <div class="nav-link" @click="toggleDropdown(category.name)">
            <i :class="category.icon"></i>
            <span>{{ category.name }}</span>
            <i class="fa fa-chevron-down dropdown-arrow"></i>
          </div>
          
          <div class="dropdown-menu" v-show="activeDropdown === category.name">
            <router-link 
              v-for="tool in category.tools" 
              :key="tool.name"
              :to="tool.path" 
              class="dropdown-item"
              @click="closeDropdown">
              <i :class="tool.icon"></i>
              <span>{{ tool.name }}</span>
            </router-link>
          </div>
        </div>
      </div>
      
      <div class="nav-actions">
        <button class="theme-toggle" @click="toggleTheme">
          <i class="fa" :class="isDark ? 'fa-sun' : 'fa-moon'"></i>
        </button>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      activeDropdown: null,
      isDark: false,
      menuItems: [
        {
          name: '代码工具',
          icon: 'fa fa-code',
          tools: [
            { name: 'JSON格式化', path: '/tools/json-format', icon: 'fa fa-sitemap' },
            { name: '代码美化', path: '/tools/code-beautify', icon: 'fa fa-indent' }
          ]
        },
        {
          name: '图像工具',
          icon: 'fa fa-image',
          tools: [
            { name: '图像压缩', path: '/tools/image-compress', icon: 'fa fa-compress' },
            { name: '格式转换', path: '/tools/image-convert', icon: 'fa fa-refresh' },
            { name: 'Logo转ICO', path: '/tools/logo-to-ico', icon: 'fa fa-file-image-o' }
          ]
        },
        {
          name: '加密工具',
          icon: 'fa fa-lock',
          tools: [
            { name: '加密解密', path: '/tools/encrypt', icon: 'fa fa-key' }
          ]
        },
        {
          name: '数据工具',
          icon: 'fa fa-table',
          tools: [
            { name: 'Excel数据分配器', path: '/tools/excel-viewer', icon: 'fa fa-file-excel-o' }
          ]
        }
      ]
    }
  },
  methods: {
    onItemEnter(categoryName) {
      this.activeDropdown = categoryName
    },
    onItemLeave() {
      this.activeDropdown = null
    },
    toggleDropdown(categoryName) {
      this.activeDropdown = this.activeDropdown === categoryName ? null : categoryName
    },
    closeDropdown() {
      this.activeDropdown = null
    },
    toggleTheme() {
      this.isDark = !this.isDark
      document.documentElement.setAttribute('data-theme', this.isDark ? 'dark' : 'light')
    }
  },
  mounted() {
    // 点击页面其他区域关闭下拉菜单
    document.addEventListener('click', (event) => {
      if (!event.target.closest('.nav-item')) {
        this.activeDropdown = null
      }
    })
  }
}
</script>

<style scoped>
.navigation {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
}

.nav-brand .brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-brand .brand-link i {
  color: var(--accent-color);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  font-weight: 500;
}

.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-link i:first-child {
  font-size: 14px;
}

.dropdown-arrow {
  font-size: 12px;
  transition: transform 0.2s;
}

.nav-item:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin-top: 0px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dropdown-item.router-link-active {
  background: var(--accent-color);
  color: white;
}

.dropdown-item i {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
  }
  
  .nav-menu {
    gap: 12px;
  }
  
  .nav-link span {
    display: none;
  }
  
  .dropdown-menu {
    min-width: 160px;
  }
}
</style>